<template>
	<view class="station-container">
		<view class="types" >
			<view class="type-list" v-for="(item, index) in stationList" :key="item.id">
				<view :class="['type-item', { 'active': index === activeIndex } ]" @tap="handleSelectItem(index)">
					{{ item.typeName }}
				</view>
			</view>
		</view>
		<view class="cate-content">
			<view class="station-wrap" v-for="ele in stationList[activeIndex].children" :key="ele.id">
				<view class="cate-title">
					{{ ele.typeName }}
				</view>
				<view class="station-list">
					<text v-for="station in ele.children" :key="station.id" :class="['station-item', {'active': typeId == station.id}]" @tap="handleSelectStation(station)">
						{{ station.typeName }}
					</text>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getTypeTree } from '@/common/api_employment.js'
	export default {
		data() {
			return {
				typeId: '',
				itemId: '',
				activeIndex: 0,
				stationList: []
			}
		},
		onLoad(option) {
			this.typeId = option.id
			this.itemId = option.itemId
			console.log(option, 'typeId');
			this.getTypeList()
		},
		methods: {
			handleSelectItem( index) {
				console.log(index, 'handleSelectItem')
				this.activeIndex = index
			},
			handleSelectStation(item) {
				console.log(item, 'handleSelectStation')
				uni.redirectTo({
					url: `/subpage/talentemployment/employment/hopework?id=${item.id}&typeName=${item.typeName}&itemId=${this.itemId}`
				})
			},
			async getTypeList() {
				const cacheKey = 'stationType_tree_data'
				const cacheTimeKey = 'stationType_tree_timestamp'
				const cacheExpireTime = 60 * 60 * 1000 // 60分钟缓存时间
				
				try {
					// 检查缓存
					const cachedData = uni.getStorageSync(cacheKey)
					const cachedTime = uni.getStorageSync(cacheTimeKey)
					const currentTime = Date.now()
					
					// 如果缓存存在且未过期，直接使用缓存数据
					if (cachedData && cachedTime && (currentTime - cachedTime < cacheExpireTime)) {
						console.log('使用缓存数据')
						this.stationList = cachedData
						return
					}
					
					// 缓存不存在或已过期，请求接口
					console.log('请求新数据')
					const res = await getTypeTree()
					if (res.code === 200) {
						this.stationList = res.data
						
						// 缓存数据和时间戳
						uni.setStorageSync(cacheKey, res.data)
						uni.setStorageSync(cacheTimeKey, currentTime)
						console.log('数据已缓存')
					}
				} catch (error) {
					console.error('获取岗位类型数据失败:', error)
					// 发生错误时，尝试使用缓存数据（即使可能过期）
					const cachedData = uni.getStorageSync(cacheKey)
					if (cachedData) {
						console.log('使用过期缓存数据')
						this.stationList = cachedData
					}
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.station-container {
		display: flex;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		
		.types {
			flex: 0 0 240rpx;
			// min-height: 100vh;
			overflow-y: auto;
			background: #F2F5FF;
			
			.type-item {
				padding: 24rpx 0;
				text-align: center;
				background-color: #F2F5FF;
				&.active {
					background-color: #fff;
				}
			}
		}
		.cate-content {
			flex: auto;
			padding: 28rpx 32rpx 32rpx;
			box-sizing: border-box;
			background: #FFF;
			overflow-y: auto;
			
			.cate-title {
				margin-bottom: 28rpx;
				font-weight: 600;
				font-size: 13px;
				color: #34314F;
				line-height: 18px;
				text-align: left;
				font-style: normal;
			}
			.station-list {
				display: flex;
				flex-wrap: wrap;
			}
			.station-item {
				display: block;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				padding: 12rpx 28rpx;
				height: 64rpx;
				border-radius: 8px;
				border: 1px solid rgba(52, 49, 79, 0.13);
				color: rgba(52, 49, 79, 0.7);
				font-weight: 400;
				font-size: 14px;
				text-align: center;
				box-sizing: border-box;
				
				&.active {
					color: #FF7F1C;
					border: 1px solid #FF7F1C;
					background: rgba(255, 127, 28, 0.08);
				}
			}
		}
	}
</style>